<template>
  <div class="teacher-home">
    <el-row :gutter="20">
      <!-- 快捷操作卡片 -->
      <el-col :span="24">
        <el-card class="quick-actions">
          <h3>快捷操作</h3>
          <div class="action-buttons">
            <el-button type="primary" @click="goToCreateCourse">
              <i class="el-icon-plus"></i>
              新建课程
            </el-button>
            <el-button type="success" @click="goToAttendance">
              <i class="el-icon-check"></i>
              我要点名
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 课程统计信息 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-number">{{ stats.totalCourses }}</div>
          <div class="stat-label">总课程数</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-number">{{ stats.activeCourses }}</div>
          <div class="stat-label">进行中课程</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-number">{{ stats.totalStudents }}</div>
          <div class="stat-label">学员总数</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TeacherHome',
  data() {
    return {
      stats: {
        totalCourses: 0,
        activeCourses: 0,
        totalStudents: 0
      }
    }
  },
  methods: {
    goToCreateCourse() {
      this.$router.push({
        path: '/teacher/course',
        query: { openDialog: 'create' }
      })
    },
    goToAttendance() {
      this.$router.push('/teacher/attendance?action=create')
    },
    fetchStats() {
      // 获取统计数据的接口调用
      this.$axios.get('/teacher/stats', {
        headers: { Authorization: localStorage.getItem('token') }
      }).then(response => {
        this.stats = response.data.data
      })
    }
  },
  mounted() {
    this.fetchStats()
  }
}
</script>

<style scoped>
.teacher-home {
  padding: 20px;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  margin-top: 10px;
  color: #606266;
}
</style>